<template>
  <PageWrapper>
    <a-row :gutter="[12, 12]">
      <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
        <a-card :bordered="false" size="small" class="proCard tabsCard">
          <div class="pt-4 user-account">
            <div class="flex justify-center user-account-head">
              <a-avatar :size="110">
                <img :src="headImg" />
              </a-avatar>
            </div>
            <div class="flex justify-center py-4 user-account-name">Ah jun</div>
            <div class="flex justify-center user-account-sign">停留只是为了，走的更远</div>
          </div>
          <a-list
            size="small"
            class="introduce"
            :bordered="false"
            item-layout="horizontal"
            :data-source="introduceData"
          >
            <a-list-item v-for="(item, index) in introduceData" :key="index">
              <a-list-item-meta :title="item.title">
                <template #avatar>
                  <component :is="item.icon" class="arco-icon" />
                </template>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
          <a-divider style="border-bottom-style: dashed" />
          <div class="tag-list">
            <div class="mb-4 tag-title">标签</div>
            <a-space class="mb-2 tag-item">
              <a-tag color="cyan">为人亲切</a-tag>
              <a-tag color="blue">对代码有洁癖</a-tag>
              <a-tag color="green">喜欢挑战新型技术</a-tag>
            </a-space>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
        <a-card :bordered="false" size="small" class="card-tabs">
          <a-tabs default-active-key="basic">
            <a-tab-pane key="basic" title="基本设置"> <BasicSetting /></a-tab-pane>
            <a-tab-pane key="safety" title="安全设置"> <SafetySetting /></a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '@/components/Page';
  import BasicSetting from './BasicSetting.vue';
  import SafetySetting from './SafetySetting.vue';
  import { renderIcon } from '@/utils';
  import { UserOutlined, TagOutlined, EnvironmentOutlined, HomeOutlined } from '@vicons/antd';
  import headImg from '@/assets/images/schoolboy.png';

  const introduceData = [
    {
      title: '资深全栈工程师',
      icon: renderIcon(UserOutlined),
    },
    {
      title: '牛B公司 - 牛B事业群 - 牛B技术部',
      icon: renderIcon(HomeOutlined),
    },
    {
      title: '中国 • 广东省 • 深圳市',
      icon: renderIcon(EnvironmentOutlined),
    },
    {
      title: 'JavaScript、HTML、CSS、Vue、Node、',
      icon: renderIcon(TagOutlined),
    },
  ];
</script>
<style lang="less" scoped>
  .thing-cell {
    margin: 0 -16px 10px;
    padding: 5px 16px;

    &:hover {
      background: #f3f3f3;
      cursor: pointer;
    }
  }

  .thing-cell-on {
    background: #f0faff;
    color: #2d8cf0;

    :deep(.n-thing-main .n-thing-header .n-thing-header__title) {
      color: #2d8cf0;
    }

    &:hover {
      background: #f0faff;
    }
  }

  .user-account {
    &-name {
      color: #333;
      font-size: 22px;
    }
  }

  .introduce {
    padding-top: 30px;
  }
</style>
